<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Insert title here</title>
    </head>

    <body>
        <h1>springboot访问第一个html页面</h1>

        <video
            id="video"
            width="400"
            height="314"
            autobuffer
            controls
            src="http://localhost:8080/video/play?videoPath=C:/Users/imlg/Desktop/springAop1.mp4"
            type="video/mp4"
        ></video>
        <p>
            选择播放速率：<select id="selRate">
                <option value="0.5">0.5</option>
                <option value="1" selected>1.0</option>
                <option value="1.25">1.25</option>
                <option value="1.5">1.5</option>
                <option value="2">2.0</option>
            </select>
        </p>
        <input type="text" id="start" value="50"/>
        <input type="text" id="end" value="60"/>
        <p><button id="btnPlay">视频播放</button></p>

        <script>
            var eleSelect = document.getElementById('selRate');
            var eleButton = document.getElementById('btnPlay');

            let startTime = document.getElementById('start');
            let endTime = document.getElementById('end');
            // 视频元素
            var video = document.getElementById('video');
            // 改变播放速率
            eleSelect.addEventListener('change', function () {
                video.playbackRate = this.value;
            });
            let playMedia = (startTime, endTime) =>{
                    video.currentTime = startTime;
                    video.play();
                    let that = this;
                    video.addEventListener(
                        'timeupdate',
                        function () {
                            // 当前播放时长
                            console.log(video.currentTime);
                            // 用秒数来显示当前播放进度
                            let timeDisplay = Math.floor(video.currentTime);
                            let endTimeCut = Math.round(endTime); // 四舍五入
                            // 当视频播放到结束时间的时候做处理
                            if (timeDisplay >= endTimeCut) {
                                // 处理代码
                                video.pause();
                            }
                        },
                        false
                    );
                };
            // 点击播放按钮
            eleButton.addEventListener('click', function () {
                playMedia(startTime.value,endTime.value);
            });
        </script>
    </body>
</html>
